<!-- Author:Rain -->
<template>
  <div class="new-guide-common__cont">
    <div class="new-guide-common__title">BOSS 信息</div>
    <div class="new-guide-base-info" graystyletype="2">
      <form autocomplete="off" class="clearfix ui-form ui-form-label-top" slot="content">
        <!-- 折叠框 -->
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="上传营业执照,进行企业认证">
            <div class="uploadLicense">
              <label for="file1">点击上传营业执照</label>
              <input type="file" id="file1" @change="uploadLicense" />
            </div>
          </el-collapse-item>
          <el-collapse-item title="上传身份证,进行实名认证">
            <div class="uploadIdentityCard">
              <div class="uploadIdentityCard1">
                <label for="file2">点击上传身份证正面</label>
                <input type="file" id="file2" @change="uploadIdentityCard1" />
              </div>
              <div class="uploadIdentityCard2">
                <label for="file3">点击上传身份证国徽面</label>
                <input type="file" id="file3" @change="uploadIdentityCard2" />
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
        <div class="form-item form-item-required form-item-error">
          <div class="item-label">真实姓名</div>
          <div class="item-content">
            <div class="name input-wrap input-wrap-text">
              <!----><!----><input
                autocomplete="on"
                spellcheck="false"
                type="text"
                v-model="name"
                placeholder="真实姓名用于认证"
                class="input"
              /><!----><!----><!----><!---->
            </div>
            <!---->
          </div>
        </div>
        <div class="form-item form-item-required form-item-error">
          <div class="item-label">身份证号</div>
          <div class="item-content">
            <div class="name input-wrap input-wrap-text">
              <!----><!----><input
                autocomplete="on"
                spellcheck="false"
                type="text"
                v-model="idCard"
                placeholder="身份证信息"
                class="input"
              /><!----><!----><!----><!---->
            </div>
            <!---->
          </div>
        </div>
        <div class="form-item form-item-required form-item-error">
          <div class="item-label">职务</div>
          <div class="item-content">
            <div class="name input-wrap input-wrap-text">
              <!----><!----><input
                autocomplete="on"
                spellcheck="false"
                type="text"
                v-model="posts"
                placeholder="公司职务"
                class="input"
              /><!----><!----><!----><!---->
            </div>
            <!---->
          </div>
        </div>
        <div class="form-item form-item-required form-item-error">
          <div class="item-label">联系电话</div>
          <div class="item-content">
            <div class="name input-wrap input-wrap-text">
              <!----><!----><input
                autocomplete="on"
                spellcheck="false"
                type="text"
                v-model="phone"
                placeholder="联系电话"
                class="input"
              /><!----><!----><!----><!---->
            </div>
            <!---->
          </div>
        </div>
        <div class="form-item form-item-required form-item-error">
          <div class="item-label">邮箱地址</div>
          <div class="item-content">
            <div class="name input-wrap input-wrap-text">
              <!----><!----><input
                autocomplete="on"
                spellcheck="false"
                type="text"
                v-model="email"
                placeholder="邮箱地址"
                class="input"
              /><!----><!----><!----><!---->
            </div>
            <!---->
          </div>
        </div>
        <div class="form-item form-item-required form-item-error">
          <div class="item-label">公司名称</div>
          <div class="item-content">
            <div class="name input-wrap input-wrap-text">
              <!----><!----><input
                autocomplete="on"
                spellcheck="false"
                type="text"
                v-model="companyName"
                placeholder="公司名称"
                class="input"
              /><!----><!----><!----><!---->
            </div>
            <!---->
          </div>
        </div>
        <div class="form-item form-item-required form-item-error">
          <div class="item-label">公司地址</div>
          <div class="item-content">
            <div class="name input-wrap input-wrap-text">
              <!----><!----><input
                autocomplete="on"
                spellcheck="false"
                type="text"
                v-model="companyAddress"
                placeholder="公司地址信息"
                class="input"
              /><!----><!----><!----><!---->
            </div>
            <!---->
          </div>
        </div>
        <div class="form-item form-item-required form-item-error">
          <div class="item-label">公司类型</div>
          <div class="item-content">
            <div class="name input-wrap input-wrap-text">
              <!----><!----><input
                autocomplete="on"
                spellcheck="false"
                type="text"
                v-model="companyType"
                placeholder="公司类型"
                class="input"
              /><!----><!----><!----><!---->
            </div>
            <!---->
          </div>
        </div>
        
        <div class="form-item form-item-required form-item-error">
          <div class="item-label">公司业务</div>
          <div class="item-content">
            <div class="name input-wrap input-wrap-text">
              <!----><!----><input
                autocomplete="on"
                spellcheck="false"
                type="text"
                v-model="businessScope"
                placeholder="经营范围"
                class="input"
              /><!----><!----><!----><!---->
            </div>
            <!---->
          </div>
        </div>
        <div class="form-item form-item-required form-item-error">
          <div class="item-label">公司信用码</div>
          <div class="item-content">
            <div class="name input-wrap input-wrap-text">
              <!----><!----><input
                autocomplete="on"
                spellcheck="false"
                type="text"
                v-model="creditCode"
                placeholder="统一社会信用代码"
                class="input"
              /><!----><!----><!----><!---->
            </div>
            <!---->
          </div>
        </div>

        <!-- 联系电话 -->
        <div class=""></div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { updateCompanyInfo } from '@/api/boss/index'
import axios from 'axios'
let name = ref('') //姓名
let idCard = ref('') //身份证信息
const activeNames = ref(['1'])
const handleChange = (val: any) => {
  activeNames.value = val
}
const companyName = ref('') //公司名称
const companyAddress = ref('') //公司地址
const companyType = ref('') //公司类型
const posts = ref('') //公司职务
const businessScope = ref('') //经营范围
const creditCode = ref('') //统一社会信用代码
const phone = ref('') //联系电话
const email = ref('') //邮箱

const url1 = ref('https://api.textin.com/robot/v1.0/api/business_license')
const url2 = ref('https://api.textin.com/ai/service/v1/recognize_stamp')
const url3 = ref('https://api.textin.com/robot/v1.0/api/id_card')
const licenseResult = ref(null) //营业执照识别结果
const identityCardFrontResult = ref(null) //身份证正面识别结果
const identityCardBackResult = ref(null) //身份证背面识别结果
const sealResult = ref(null) //公章识别结果
// 创建一个枚举
enum UploadType {
  License = 1,
  Seal = 2,
  IdentityCard1 = 3,
  IdentityCard2 = 4
}
const uploadLicense = async (e: any) => {
  await uploadFile(e, url1.value, UploadType.License)
  await uploadFile(e, url2.value, UploadType.Seal)
}

const uploadIdentityCard1 = async (e: any) => {
  await uploadFile(e, url3.value, UploadType.IdentityCard1)
}

const uploadIdentityCard2 = async (e: any) => {
  await uploadFile(e, url3.value, UploadType.IdentityCard2)
  console.log('identityCardBackResult', identityCardBackResult.value)
}

const uploadFile = (e: any, urlStr: string, typeFlag: unknown) => {
  let file = e.target.files[0]
  let reader = new FileReader()
  reader.readAsArrayBuffer(file)
  reader.onload = async function (e) {
    let data = e.target.result
    let fileData = new Uint8Array(data)
    let appId = '28c4b4448e7ce4dba8bc0da7c9a4076a'
    let secretCode = '616ea801bc9bcd997ce1e15b1e9954f9'
    let url = urlStr
    try {
      const response = await axios({
        method: 'post',
        url: url,
        data: fileData.buffer,
        headers: {
          'Content-Type': 'application/octet-stream',
          'x-ti-app-id': appId,
          'x-ti-secret-code': secretCode
        }
      })
      console.log('response', response)
      if (!response.data.result) {
        return
      }
      let list = null
      if (typeFlag === UploadType.Seal) {
        list = response.data.result.details.stamp
        sealResult.value = list
      } else if (typeFlag === UploadType.License) {
        list = response.data.result.item_list
        licenseResult.value = list
      } else if (typeFlag === UploadType.IdentityCard1) {
        list = response.data.result.item_list
        identityCardFrontResult.value = list
      } else if (typeFlag === UploadType.IdentityCard2) {
        list = response.data.result.item_list
        identityCardBackResult.value = list
      }

      if (!list) {
        console.log('list1', list)
        console.log(2, '上传失败')
        return
      }
      console.log('list', list)
    } catch (err) {
      console.error(err)
    }
  }
  reader.onerror = function (error) {
    console.error('Error', error)
  }
}

onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
})

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
})

function dd() {
  //这里进行封装，看是否能成功！！
  //注意传数据
  let data = {
    realname: name.value,
    linkmanIden: idCard.value,
    company:companyName.value,
    content:businessScope.value,
    address:companyAddress.value,
    position:posts.value,
    creditCode:creditCode.value,
    phone:phone.value,
    email:email.value
  }
  return updateCompanyInfo(data)
}
//如果被引用的话还要记得导出啊！！！
defineExpose({
  dd
})

watch(
  () => licenseResult.value,
  (newVal, oldVal) => {
    console.log('licenseResult', newVal)
    creditCode.value = newVal[0].value
    companyName.value = newVal[1].value
    companyType.value = newVal[3].value
    businessScope.value = newVal[7].value
    companyAddress.value = newVal[8].value

  },
  { deep: true }
)

watch(
  () => identityCardFrontResult.value,
  (newVal, oldVal) => {
    console.log('identityCardFrontResult', newVal)
    console.log('identityCardFrontResult', newVal[5].value);
    console.log('identityCardFrontResult', newVal[2].value);
    name.value = newVal[5].value
    idCard.value = newVal[2].value
    console.log('name', name.value);
    console.log('idCard', idCard.value);
  },
  { deep: true }
)
</script>

<style scoped>
@import url('@/assets/guideCommon.css');
/* 出生年月 */
.new-guide-base-info .birth-notice {
  font-size: 12px;
  line-height: 17px;
  color: #aaa;
  margin-top: 4px;
}

/* 身份 */
#new-guide-base-info__intentionType .radio-item {
  font-size: 0;
  width: 234px;
  height: 200px;
  border: 1px solid transparent;
  box-sizing: border-box;
  background: url(https://img.bosszhipin.com/static/file/2023/5mc5ikngtk1683518395691.png);
  background-repeat: no-repeat;
  background-size: 1872px 200px;
  transition: none;
}

#new-guide-base-info__intentionType .radio-item:hover,
#new-guide-base-info__intentionType .selected {
  background-color: #e1f7f7;
  border-color: var(--themeColor);
}

/* 状态 */
.new-guide-base-info .mb-20 {
  margin-bottom: 20px;
}

:deep(.el-collapse-item__header) {
  color: #999;
}

:deep(.is-active) {
  color: #333;
}

.uploadLicense {
  position: relative;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 320px;
  border: 2px dashed var(--themeColor);
  border-radius: 4px;
  cursor: pointer;
  /* 背景图片填满 */
  background-image: url('../../../assets/icons/营业执照背景.jpg');
  background-size: cover;
  background-position: center;
  margin-bottom: 36px;
  z-index: 0;
}

.uploadLicense::before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: -1;
}

#file1,
#file2,
#file3 {
  display: none;
}

.uploadLicense label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: var(--font-16);
  color: #8a8a8a;
  font-weight: bold;
  cursor: pointer;
}

.uploadIdentityCard1 {
  position: relative;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 320px;
  border: 2px dashed var(--childThemeColor);
  border-radius: 4px;
  cursor: pointer;
  /* 背景图片填满 */
  background-image: url('../../../assets/icons/正面.png');
  background-size: cover;
  background-position: center;
  margin-bottom: 36px;
  z-index: 0;
}

.uploadIdentityCard1 label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: var(--font-16);
  color: #8a8a8a;
  font-weight: bold;
  cursor: pointer;
}

.uploadIdentityCard1::before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: -1;
}

.uploadIdentityCard2 {
  position: relative;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 320px;
  border: 2px dashed var(--childThemeColor);
  border-radius: 4px;
  cursor: pointer;
  /* 背景图片填满 */
  background-image: url('../../../assets/icons/国徽面.png');
  background-size: cover;
  background-position: center;
  margin-bottom: 36px;
  z-index: 0;
}

.uploadIdentityCard2::before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: -1;
}

.uploadIdentityCard2 label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: var(--font-16);
  color: #8a8a8a;
  font-weight: bold;
  cursor: pointer;
}

.form-item {
  margin-top: 32px;
}
</style>
